<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>登录注册忘记密码页面</title>
    <link rel="stylesheet" href="css/normalize.min.css" />
    <link rel="stylesheet" href="css/register.css" />
  </head>

  <body>
    <div id="formContainer" class="dwo">
      <div class="formLeft">
        <img src="images/avatar.png" />
      </div>
      <div class="formRight">
        <!-- Register form -->
        <form id="register" class="otherForm">
          <header>
            <h1>用户注册</h1>
            <p>注册后享受更多服务</p>
          </header>
          <section>
            <label>
              <p>用户名</p>
              <input type="text" id="userName" />
              <div class="border"></div>
              <div id="user_prompt">用户名由8-16位字母、数字、下划线组成，必须字母开头</div>
            </label>
            <label>
              <p>邮箱</p>
              <input type="email" id="email" />
              <div class="border"></div>
            </label>
            <label>
              <p>密码</p>
              <input type="password" id="pwd" />
              <div class="border"></div>
            </label>
            <label>
              <p>重复密码</p>
              <input type="password" id="repwd" />
              <div class="border"></div>
            </label>
            <button id="btn" type="button" onclick="saveData()">注 册</button>
          </section>
          <footer>
            <a href="login.html">返 回</a>
          </footer>
        </form>
      </div>
    </div>
    <script>
      //localStroage  本地存储对象
      // setItem(key,value) 存储
      // getItem(key) 获取
      // removeItem(key) 删除
      // clear()  清除所有
      //定义函数
      function saveData(){
          //1.获取用户文本框输入的内容
          var userName = document.getElementById('userName').value;
          var email = document.getElementById('email').value;
          var pwd = document.getElementById('pwd').value;
          //2.将用户信息绑定成一个对象
          var userInfo = {
            userName:userName,
            email:email,
            pwd:pwd
          };
          //3.存储数据 由于只能存储字符串类型的对象
          //将对象转换为字符串类型 JSON.stringify()  
          //将字符串类型转为JSON对象  JSON.parse()
          localStorage.setItem("userInfo",JSON.stringify(userInfo));
          if( checkUser()  ){
            //4.弹出警告框 跳转到登录界面
          alert('注册成功！');
          //延迟1秒跳转
          setTimeout("location.href = 'login.html'",1000);
          }else{
            alert('信息填写有误');
          }
          
      }


       //验证用户名
    function checkUser(){
      //正则表达式
      var reg = /^[a-zA-Z]\w{7,15}/;
      //获取用户输入的文本
      var user = document.getElementById('userName').value;
      //获取提示信息对象
      var user_prompt = document.getElementById('user_prompt');
      //符合要求
      if( reg.test(user)){
        user_prompt.innerHTML = '';
        return true;
      }else{
        user_prompt.innerHTML = '用户名格式有误'
        return false;
      }
    }
    </script>
  </body>
</html>
